<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<aside th:fragment="bookModal">
    <!-- 登录模态框（Modal）账号密码 start-->
    <div class="modal fade" id="loginModal" tabindex="-1" role="dialog" aria-labelledby="loginModalLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">
                        &times
                    </button>
                    <h4 class="modal-title" id="loginModalLabel">
                        用户登录
                    </h4>
                </div>
                <div class="modal-body">
                    <!--登录的form表单-->
                    <form id="loginForm" class="form-horizontal" role="form" action="">
                        <div class="form-group has-feedback">
                            <label class="col-sm-2 control-label">用户名</label>
                            <div class="col-sm-5">
                                <input type="text" class="form-control" id="username" name="username" placeholder="请输入用户名">
                                <span class="glyphicon glyphicon-user form-control-feedback"></span>
                            </div>
                            <div class="col-sm-3" id="userNameTip" style="padding-top: 10px; display: none">
                                <label class="alert-danger">用户名不存在</label>
                            </div>
                        </div>
                        <div class="form-group has-feedback">
                            <label class="col-sm-2 control-label">密码</label>
                            <div class="col-sm-5">
                                <input type="password" class="form-control" id="password" name="password" placeholder="请输入密码">
                                <span class="glyphicon glyphicon-lock form-control-feedback"></span>
                            </div>
                            <div class="col-sm-3" id="userPwdTip" style="padding-top: 10px; display: none">
                                <label class="alert-danger">密码不正确</label>
                            </div>
                        </div>
                        <div class="form-group has-feedback">
                            <div class="col-sm-3 col-sm-offset-2">
								<span class="checkbox">
									<label>
										<input type="checkbox">请记住我
									</label>
								</span>
                            </div>
                            <div class="col-sm-offset-2">
                                <button class="btn btn-link" type="button" data-toggle="modal" data-dismiss="modal"
                                        data-target="#myPhoneModal">手机号登录</button>
                            </div>
                        </div>
                        <div class="modal-footer">
                            <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                            <input type="button" class="btn btn-primary" value="登录" th:onclick="|login()|">
                        </div>
                    </form>
                    <!--form结束-->
                </div>
            </div>
            <!-- /.modal-content -->
        </div>
    </div>
    <!-- 登录模态框（Modal）账号密码 end-->

    <!-- 登录modal 手机 start/.modal -->
    <div class="modal fade" id="myPhoneModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"
         aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">
                        &times;
                    </button>
                    <h4 class="modal-title" id="myModalLabel">
                        用户登录
                    </h4>
                </div>
                <div class="modal-body">
                    <!--登录的form表单-->
                    <form class="form-horizontal" role="form" action="" id="loginPhoneForm">
                        <div class="form-group has-feedback">
                            <label for="loginPhone" class="col-sm-2 control-label">手机号</label>
                            <div class="col-sm-5">
                                <input type="text" class="form-control" id="loginPhone" placeholder="请输入手机号">
                                <span class="glyphicon glyphicon-phone form-control-feedback"></span>
                            </div>
                            <div class="col-sm-3" style="padding-top: 10px; display: none" id="userPhoneCodeTip">
                                <label class="alert-danger">验证码/手机号错误</label>
                            </div>
                            <div id="userPhoneTip" class="col-sm-3" style="padding-top: 10px; display: none">
                                <label class="alert-danger" id="userPhoneMsg">手机号不合法</label>
                            </div>
                        </div>
                        <!--短信验证码-->
                        <div class="form-group has-feedback">
                            <label for="loginCode" class="col-sm-2 control-label">验证码</label>
                            <div class="col-sm-5">
                                <input type="text" class="form-control" id="loginCode" placeholder="请输入短信验证码">
                                <span class="glyphicon glyphicon-lock form-control-feedback"></span>
                            </div>
                            <div id="getPhoneCodeDiv" class="col-sm-3" style="padding-top: 10px;">
                                <a href="javascript:void(0)" id="getPhoneCode">获取验证码</a>
                            </div>
                        </div>

                        <div class="form-group has-feedback">
                            <div class="col-sm-3 col-sm-offset-2">
								<span class="checkbox">
									<label>
										<input type="checkbox">请记住我
									</label>
								</span>
                            </div>
                            <div class="col-sm-offset-2">
                                <button class="btn btn-link" type="button" data-toggle="modal" data-dismiss="modal"
                                        data-target="#loginModal">账号密码登录</button>
                            </div>
                        </div>

                        <div class="modal-footer">
                            <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                            <input type="button" class="btn btn-primary" value="登录" th:onclick="|phoneLogin()|">
                        </div>
                    </form>
                    <!--form结束-->
                </div>
            </div>
            <!-- /.modal-content -->
        </div>
    </div>
    <!-- 登录modal 手机 end/.modal -->

    <!-- 注册模态框 start-->
    <div class="modal fade" id="register" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">
                        &times;
                    </button>
                    <h4 class="modal-title" id="regModalLabel">
                        用户注册
                    </h4>
                </div>
                <div class="modal-body">
                    <!--注册的form表单-->
                    <form id="regForm" action="" class="form-horizontal" role="form">
                        <div class="form-group has-feedback">
                            <label class="col-sm-2 control-label">用户名</label>
                            <div class="col-sm-5">
                                <input type="text" name="username" class="form-control" required="required" placeholder="小写字母开头,不含中文." th:onblur="|checkUser(this)|">
                                <span class="glyphicon glyphicon-user form-control-feedback"></span>
                            </div>
                            <div id="registName" class="col-sm-3" style="padding-top: 10px; display: none">
                                <label class="alert-danger" id="tipNameMsg">用户名不合法</label>
                            </div>
                        </div>
                        <div class="form-group has-feedback">
                            <label class="col-sm-2 control-label">密码</label>
                            <div class="col-sm-5">
                                <input type="password" class="form-control" id="firstpwd" placeholder="密码长度6-8位" minlength="6" maxlength="8" required="required">
                                <span class="glyphicon glyphicon-lock form-control-feedback"></span>
                            </div>
                            <div class="col-sm-3" id="registPwd" style="padding-top: 10px; display: none">
                                <label class="alert-danger" id="passwordMsg">两次密码不一致</label>
                            </div>
                        </div>
                        <div class="form-group has-feedback">
                            <label class="col-sm-2 control-label">确认密码</label>
                            <div class="col-sm-5">
                                <input type="password" class="form-control" id="lastpwd" minlength="6" maxlength="8" placeholder="和密码保持一致" th:onblur="|checkPwd()|" required="required">
                                <span class="glyphicon glyphicon-lock form-control-feedback"></span>
                            </div>
                        </div>

                        <div class="form-group has-feedback">
                            <label class="col-sm-2 control-label">邮箱</label>
                            <div class="col-sm-5">
                                <input type="email" name="email" class="form-control" placeholder="合法邮箱格式" required>
                                <span class="glyphicon glyphicon-envelope form-control-feedback"></span>
                            </div>
                        </div>

                        <div class="form-group has-feedback">
                            <label class="col-sm-2 control-label">电话</label>
                            <div class="col-sm-5">
                                <input type="tel" name="phone" id="userPhone" class="form-control" placeholder="合法手机格式" required>
                                <span class="glyphicon glyphicon-earphone form-control-feedback"></span>
                            </div>
                            <div id="registPhone" class="col-sm-3" style="padding-top: 10px; display: none">
                                <label class="alert-danger" id="tipPhoneMsg">手机号不合法</label>
                            </div>
                        </div>

                        <!--短信验证码-->
                        <div class="form-group has-feedback">
                            <label class="col-sm-2 control-label">验证码</label>
                            <div class="col-sm-5">
                                <input type="text" name="code" id="userCode" class="form-control" placeholder="输入短信验证码" required>
                                <span class="glyphicon glyphicon-phone form-control-feedback"></span>
                            </div>
                            <div id="registCode" class="col-sm-3" style="padding-top: 10px;">
                                <a href="javascript:void(0)" id="getCode">获取验证码</a>
                            </div>
                        </div>

                        <div class="form-group has-feedback">
                            <label class="col-sm-2 control-label">公司</label>
                            <div class="col-sm-5">
                                <input type="text" name="company" class="form-control" placeholder="请输入公司地址" required>
                                <span class="glyphicon glyphicon-home form-control-feedback"></span>
                            </div>
                        </div>

                        <!--<div class="form-group has-feedback">
                            <label class="col-sm-2 control-label">地址</label>
                            <div class="col-sm-5">
                                <input type="text" class="form-control" placeholder="请输入收货">
                                <span class="glyphicon glyphicon-home form-control-feedback"></span>
                            </div>
                        </div>-->

                        <div class="modal-footer">
                            <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                            <input type="button" class="btn btn-primary" value="注册" th:onclick="register()">
                        </div>
                    </form>
                    <!--form结束-->
                </div>
            </div>
            <!-- /.modal-content -->
        </div>
    </div>
    <!-- 注册模态框 end-->
</aside>
